<template>
	<view class="flex-col page">
		<view class="flex-col justify-start relative section">
			<view class="shrink-0 section_2"></view>
			<text class="text pos">9:41</text>
			<image class="shrink-0 image pos_2"
				src="https://qiniu.ccchongya.com/chongya/images/16947555391975150836.png" />
			<image class="shrink-0 image_2 pos_3"
				src="https://qiniu.ccchongya.com/chongya/images/16947555391316573392.png" />
			<image class="shrink-0 image_3 pos_4"
				src="https://qiniu.ccchongya.com/chongya/images/e1736193184e7dda76ba4d26e6fce7c0.png" />
			<image class="shrink-0 image_4 pos_6"
				src="https://qiniu.ccchongya.com/chongya/images/025ac659c9bd8d3cb18446d150269c29.png" />
			<view class="flex-row justify-center items-center section_3 space-x-12 pos_5">
				<view class="flex-col justify-start items-center image-wrapper">
					<image class="image_6"
						src="https://qiniu.ccchongya.com/chongya/images/16947555491314335694.png" />
				</view>
				<view class="section_4"></view>
				<view class="flex-col justify-start items-center image-wrapper">
					<image class="image_5"
						src="https://qiniu.ccchongya.com/chongya/images/16947555490496892593.png" />
				</view>
			</view>
			<image class="shrink-0 image_7 pos_7"
				src="https://qiniu.ccchongya.com/chongya/images/16947555498000592936.png" />
			<view class="shrink-0 section_5 pos_8"></view>
			<view class="flex-col section_6 pos_9">
				<view class="flex-col space-y-12">
					<text class="self-start font_1 text_2">当前定位：</text>
					<view class="flex-row justify-between">
						<text class="font_2">湖北省宜昌市沿江大道159号</text>
						<text class="font_1 text_3">3分钟前</text>
					</view>
				</view>
				<view class="flex-row justify-between group">
					<text class="font_2">湖北省宜昌市沿江大道159号</text>
					<text class="font_1 text_4">3分钟前</text>
				</view>
				<view class="flex-row justify-between group_2">
					<text class="font_2">湖北省宜昌市沿江大道159号</text>
					<text class="font_1 text_5">3分钟前</text>
				</view>
				<view class="flex-row justify-between group_3">
					<text class="font_2">湖北省宜昌市沿江大道159号</text>
					<text class="font_1 text_6">3分钟前</text>
				</view>
				<view class="flex-row justify-between equal-division group_4">
					<view class="flex-row items-center space-x-10">
						<image class="shrink-0 image_8"
							src="https://qiniu.ccchongya.com/chongya/images/16947555499845510795.png" />
						<text class="font_1">导航</text>
					</view>
					<view class="flex-row items-center space-x-10">
						<image class="shrink-0 image_8"
							src="https://qiniu.ccchongya.com/chongya/images/16947555501338854097.png" />
						<text class="font_1">更新</text>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-row equal-division_2 section_7">
			<view class="flex-col items-center group_5 equal-division-item space-y-4">
				<image class="image_9"
					src="https://qiniu.ccchongya.com/chongya/images/b0524fd56b8df95e0dd1609bc4977578.png" />
				<text class="font_3 text_7">首页</text>
			</view>
			<view class="flex-col items-center group_5 equal-division-item space-y-4">
				<image class="image_9"
					src="https://qiniu.ccchongya.com/chongya/images/03ebec244e7f26d7bcaeb00da5c73825.png" />
				<text class="font_3">拖运</text>
			</view>
			<view class="flex-col items-center group_5 equal-division-item space-y-4">
				<image class="image_9"
					src="https://qiniu.ccchongya.com/chongya/images/3fca2aa62f3c93aa4fea8d5e28014e29.png" />
				<text class="font_3">宠圈</text>
			</view>
			<view class="flex-col items-center group_5 equal-division-item space-y-4">
				<image class="image_9"
					src="https://qiniu.ccchongya.com/chongya/images/16947555382962496709.png" />
				<text class="font_3">服务</text>
			</view>
			<view class="flex-col items-center group_5 equal-division-item space-y-4">
				<image class="image_9"
					src="https://qiniu.ccchongya.com/chongya/images/ca00ffcfeb61390fb30da9bd21da0813.png" />
				<text class="font_3">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {};
		},

		methods: {},
	};
</script>

<style scoped lang="css">
	@import url('../../static/css/style.css');

	.page {
		background-color: #f5f7f7;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		background-color: #ffffff;
		overflow: hidden;
		background-image: url('https://qiniu.ccchongya.com/chongya/images/16947555499652887615.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.section_2 {
		background-image: url('https://qiniu.ccchongya.com/chongya/images/16947555499652887615.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 1330rpx;
	}

	.text {
		color: #263238;
		font-size: 28rpx;
		font-family: HarmonyOSSansSC;
		line-height: 21rpx;
	}

	.pos {
		position: absolute;
		left: 21rpx;
		top: 13rpx;
	}

	.image {
		width: 38rpx;
		height: 22rpx;
	}

	.pos_2 {
		position: absolute;
		right: 128rpx;
		top: 14rpx;
	}

	.image_2 {
		width: 34rpx;
		height: 24rpx;
	}

	.pos_3 {
		position: absolute;
		right: 83rpx;
		top: 13rpx;
	}

	.image_3 {
		width: 48rpx;
		height: 23rpx;
	}

	.pos_4 {
		position: absolute;
		right: 19rpx;
		top: 14rpx;
	}

	.image_4 {
		border-radius: 40rpx;
		width: 70rpx;
		height: 32rpx;
	}

	.pos_6 {
		position: absolute;
		left: 24rpx;
		top: 78rpx;
	}

	.section_3 {
		padding: 12rpx 24rpx;
		background-color: #ffffffd6;
		border-radius: 50rpx;
		width: 174rpx;
		border: solid 1rpx #97979733;
	}

	.space-x-12>view:not(:first-child),
	.space-x-12>text:not(:first-child),
	.space-x-12>image:not(:first-child) {
		margin-left: 24rpx;
	}

	.pos_5 {
		position: absolute;
		right: 22rpx;
		top: 72rpx;
	}

	.image-wrapper {
		width: 38rpx;
	}

	.image_6 {
		width: 38rpx;
		height: 14rpx;
	}

	.section_4 {
		background-color: #00000033;
		width: 1rpx;
		height: 37rpx;
	}

	.image_5 {
		width: 34rpx;
		height: 34rpx;
	}

	.image_7 {
		width: 68rpx;
		height: 68rpx;
	}

	.pos_7 {
		position: absolute;
		right: 276rpx;
		top: 342rpx;
	}

	.section_5 {
		background-color: #43cf7c;
		border-radius: 50%;
		height: 13rpx;
	}

	.pos_8 {
		position: absolute;
		left: 435rpx;
		right: 302rpx;
		top: 417rpx;
	}

	.section_6 {
		padding: 36rpx 36rpx 58rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.pos_9 {
		position: absolute;
		left: 14rpx;
		right: 22rpx;
		top: 782rpx;
	}

	.space-y-12>view:not(:first-child),
	.space-y-12>text:not(:first-child),
	.space-y-12>image:not(:first-child) {
		margin-top: 24rpx;
	}

	.font_1 {
		font-size: 24rpx;
		line-height: 22rpx;
		color: #000000;
	}

	.text_2 {
		font-weight: 700;
		line-height: 23rpx;
	}

	.font_2 {
		font-size: 24rpx;
		line-height: 22rpx;
		color: #666e7a;
	}

	.text_3 {
		margin-right: 8rpx;
	}

	.group {
		margin-top: 48rpx;
	}

	.text_4 {
		margin-right: 8rpx;
	}

	.group_2 {
		margin-top: 48rpx;
	}

	.text_5 {
		margin-right: 8rpx;
	}

	.group_3 {
		margin-top: 48rpx;
	}

	.text_6 {
		margin-right: 8rpx;
	}

	.equal-division {
		align-self: center;
		margin-top: 92rpx;
	}

	.group_4 {
		width: 501rpx;
	}

	.space-x-10>view:not(:first-child),
	.space-x-10>text:not(:first-child),
	.space-x-10>image:not(:first-child) {
		margin-left: 20rpx;
	}

	.image_8 {
		border-radius: 130rpx;
		width: 64rpx;
		height: 64rpx;
	}

	.equal-division_2 {
		margin-top: 14rpx;
	}

	.section_7 {
		padding: 24rpx 0;
		background-color: #ffffff;
		overflow: hidden;
	}

	.group_5 {
		flex: 1 1 150rpx;
	}

	.equal-division-item {
		padding: 12rpx 0;
	}

	.space-y-4>view:not(:first-child),
	.space-y-4>text:not(:first-child),
	.space-y-4>image:not(:first-child) {
		margin-top: 8rpx;
	}

	.image_9 {
		width: 48rpx;
		height: 48rpx;
	}

	.font_3 {
		font-size: 20rpx;
		font-family: HarmonyOSSansSC;
		line-height: 18rpx;
		color: #666e7a;
	}

	.text_7 {
		color: #ffbd52;
	}
</style>
